<template>
  <div id="app">
    <x-chart id="test" :option="option"></x-chart>
    <x-chart id="test2" :option="option_2"></x-chart>
    <x-chart id="test3" :option="option_3"></x-chart>
    <x-chart id="test4" :option="option_4"></x-chart>
  </div>
</template>
<script>
// 导入chart组件
import XChart from "../components/chart.vue";
// 导入chart组件模拟数据
import options from "../chart-options/options";
import options_2 from "../chart-options/options_2";
import options_3 from "../chart-options/options_3";
import options_4 from "../chart-options/options_4";
export default {
  name: "app",
  data() {
    let option = options.bar;
    let option_2 = options_2.bar;
    let option_3 = options_3.bar;
    let option_4 = options_4.bar;
    return {
      option: option,
      // id: "test2",
      option_2: option_2,
      option_3: option_3,
      option_4: option_4,
    };
  },
  components: {
    XChart,
  },
};
</script>
<style>
#test {
  float: left;
  width: 500px;
  height: 400px;
}
#test2 {
  float: left;
  width: 500px;
  height: 400px;
  margin-left: 50px;
}
#test3 {
  float: left;
  width: 500px;
  height: 400px;
  /* margin: 40px auto; */
}
#test4 {
  /* background-color:red; */
  float: left;
  margin-left: 50px;
  width: 500px;
  height: 400px;
  /* margin: 40px auto; */
}
</style>